<template>
  <div class="JD-channel">
    <header v-if="!isDisabled">
      <el-button size="mini" type="primary" round @click="saveSpuChannelInfo">
        保存
      </el-button>
    </header>

    <seriesList ref="seriesListRef" :list="spuData.skuInfoList" :thead-list="theadList" :disabled="isDisabled" :form-data="channelInfo">
      <template v-slot:header>
        <channelAttribute ref="channelAttr" :commodity-attribute="channelInfo" key-name="spuChannelBaseAttr" :is-disabled="isDisabled" />
      </template>
    </seriesList>
  </div>
</template>

<script>
import seriesList from './seriesList'
import channelAttribute from '@/views/coi/components/channelAttribute'

export default {
  name: 'WMDJChannel',
  components: {
    seriesList,
    channelAttribute
  },
  props: {
    spuData: {
      type: Object,
      required: true
    },
    channelInfo: {
      type: [Object, null],
      default: () => {
        return {}
      }
    },
    isDisabled: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      isChange: false
    }
  },
  computed: {
    // channelInfo() {
    //   const index = this.spuData.channelInfoList.findIndex(_ => _.channelId === '12')
    //   if (index !== -1) return this.spuData.channelInfoList[index]
    //   return {}
    // },
    theadList: {
      get() {
        const arrList = []
        const { mainAttrName, secondaryAttrName } = this.spuData
        if (mainAttrName) {
          arrList.push({
            name: `* ${mainAttrName}`,
            label: `${mainAttrName}`,
            minWidth: '100',
            value: 'mainAttrValueAlias'
          })
        }
        if (secondaryAttrName) {
          arrList.push({
            name: `${secondaryAttrName}`,
            label: `${secondaryAttrName}`,
            minWidth: '100',
            value: 'secondAttrValueAlias'
          })
        }
        return [
          {
            name: '*主品',
            width: '80',
            slot: 'mainProduct'
          },
          {
            name: 'UPC(不含检验码)',
            value: 'upcWoCd',
            minWidth: '100'
          },
          {
            name: '商品名称',
            value: 'upcName',
            minWidth: '100'
          },
          ...arrList
        ]
      },
      deep: true
    }
  },
  methods: {
    saveSpuChannelInfo() {
      // this.checkFormData()
      this.$emit('saveSpuChannelInfo')
    },
    checkFormData() {
      const refs = this.$refs
      const refsKey = Object.keys(this.$refs)
      const check = []
      refsKey.forEach((_) => {
        if (refs[_].submitForm) check.push(refs[_].submitForm())
      })
      const flag = check.every((_) => _)
      console.log(check, flag)
      return flag
    }
  }
}
</script>

<style scoped lang="scss">
.JD-channel {
  header {
    margin: 0 12px;
    display: flex;
    justify-content: flex-end;
  }
}

/deep/ .el-table__body {
  .el-form-item {
    margin: 0;
  }
}
</style>
